<template>
	<view class="record-content">
		<view class="record-flex" v-for="(item,index) in plusRecord" :key="index">
			<view class="record-title">{{item.type_name+'（'+item.time + '天）'}}</view>
			<view class="record-right">
				<view class="record-title">￥{{item.money}}</view>
				<view class="record-time">{{item.addtime}}</view>
			</view>
		</view>
		<view class="kong" @tap="getMore" v-if="canLoad && plusRecord.length">获取更多</view>
		<view class="kong" v-if="!canLoad && plusRecord.length">已经到底了</view>
		<view class="no-record" v-if="!plusRecord.length">
			{{msg}}
		</view>
	</view>
</template>

<script>
	const app = getApp().globalData;
	export default {
		data() {
			return {
				plusRecord: [],
				msg: '',
				canLoad: true,
				page: 1,
			}
		},
		methods: {
			getMore(){
				let page = this.page + 1
				this.setData({
					page: page 
				})
				this.getRecord();
			},
			getRecord(){
				let that = this;
				let page = this.page
				app.sendRequest({
				  url: '/Recharge/plusBuyRecord',
				  type: "post",
				  data: {
					  page: page
				  },
				  showLoading: false,
				  success: function (res) {
				    if (res.status == 1) {
						var list = [];
						
						if (page == 1) {
						  list = res.data;
						} else {
						  var order_info = res.data;
						  list = that.plusRecord;
						  list.push.apply(list, order_info);
						}
						var canLoad = true;
						
						if (res.data.length < res.limit) {
						  canLoad = false;
						}
						
				      that.setData({
				        plusRecord: list,
						canLoad: canLoad
				      });
				    }else{
						that.setData({
							msg: res.msg
						})
						uni.showToast({
						  title: res.msg,
						  icon: 'none',
						  duration: 1500,
						  mask: false
						});
					}
				  }
				});
			}
		},
		onLoad(options){
			this.getRecord();
		}
	}
</script>

<style>
page{
	background: #f5f5f5;
}
.record-content{
	padding: 30rpx;
}
.record-flex{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	background: #FFFFFF;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
}
.record-title{
	color: #333333;
	font-size: 26rpx;
}
.record-right{
	text-align: right;
}
.record-time{
	font-size: 24rpx;
	color: #999999;
}
.no-record{
	text-align: center;
	font-size: 26rpx;
	color: #999;
}
</style>
